﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="java.util.*" pageEncoding="UTF-8"%>


<!--_meta 作为公共模版分离出去-->
.<jsp:include page="meta.jsp"></jsp:include>
<!--/meta 作为公共模版分离出去-->

<title>H-ui.admin v3.0</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/user/css/bootstrap.min.css" />
<style type="text/css">
#webcam {
	border: 1px solid #666666;
	width: 320px;
	height: 240px;
}

#photos {
	border: 1px solid #666666;
	width: 320px;
	height: 240px;
}

.btn {
	width: 320px;
	height: auto;
	margin: 5px 0px;
}

.btn input[type=button] {
	width: 150px;
	height: 50px;
	line-height: 50px;
	margin: 3px;
}
</style>


</head>

<body>
	<!--_header 作为公共模版分离出去-->
	<jsp:include page="header.jsp"></jsp:include>
	<!--/_header 作为公共模版分离出去-->

	<!--_menu 作为公共模版分离出去-->
	<jsp:include page="menu.jsp"></jsp:include>
	<!--/_menu 作为公共模版分离出去-->

	<section class="Hui-article-box">
		<nav class="breadcrumb">
			<i class="Hui-iconfont"></i> <span class="c-999 en">&gt;</span> <span
				class="c-666">个人中心</span> <a class="btn btn-success radius r"
				style="line-height: 1.6em; margin-top: 3px"
				href="javascript:location.replace(location.href);" title="刷新"><i
				class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<div class="container">
			<div class="account" align="center">
				<!-- Form -->
				<div class="row">
					<div class="col-xs-2 col-md-2 "></div>
					<div class="registration_form col-xs-4 col-md-4" align="left">
						<h1>
							<span> 我的个人信息 </span>
						</h1>
						<form id="registration_form">
							<div>
								<label>用户名： <span>${user.uname}</span>
								</label>
							</div>

							<div>
								<label>性别： <span>${user.usex}</span>
								</label>
							</div>


							<div>
								<label> 手机号：<span>${user.utel}</span>
								</label>
							</div>
						</form>

						<div id="webcam"></div>
						<div class="btn">
							<input type="hidden" id="uid" value="${user.uid}"> <input
								type="button" value="录入人脸" id="saveBtn" onclick="savePhoto();" class="btn btn-info" />
						</div>

					</div>

					<!-- /Form -->
					<div class="registration_form col-xs-4 col-md-4" align="left">
						
					</div>
				</div>
			</div>
			<div class="col-md-4"></div>
		</div>

		<%-- 
		<div id="webcam"></div>
	<div class="btn">
		<input type="hidden" id="uid" value="${user.uid}"> 
		<input type="button" value="录入人脸" id="saveBtn" onclick="savePhoto();" />
	</div> --%>

	</section>

	<!--_footer 作为公共模版分离出去-->
	<jsp:include page="footer.jsp"></jsp:include>
	<!--/_footer /作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/laypage/1.2/laypage.js"></script>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/admin/js/jquery.webcam.min.js"></script>
	<script type="text/javascript">
		$(function() {
			var w = 320, h = 240;
			var pos = 0, ctx = null, saveCB, image = [];

			var canvas = document.createElement("canvas");
			canvas.setAttribute('width', w);
			canvas.setAttribute('height', h);

			/*  console.log(canvas.toDataURL); */
			if (canvas.toDataURL) {

				ctx = canvas.getContext("2d");

				image = ctx.getImageData(0, 0, w, h);

				saveCB = function(data) {

					var col = data.split(";");
					var img = image;

					for (var i = 0; i < w; i++) {
						var tmp = parseInt(col[i]);
						img.data[pos + 0] = (tmp >> 16) & 0xff;
						img.data[pos + 1] = (tmp >> 8) & 0xff;
						img.data[pos + 2] = tmp & 0xff;
						img.data[pos + 3] = 0xff;
						pos += 4;
					}

					if (pos >= 4 * w * h) {
						ctx.putImageData(img, 0, 0);
						/* $.post("servlet/CatD", {type: "data", image: canvas.toDataURL("image/png")}, function(msg){
						    console.log("===="+eval(msg));
						    pos = 0;
						    $("#img").attr("src", msg+"");
						}); */
						$.ajax({
							type : "post",
							url : "entryface" ,
							dataType : "json",
							data : {
								type : "pixel",
								image : canvas.toDataURL("image/png"),
								uid : $("#uid").val()
							},
							success : function(data) {
								/* alert(data.msg); */
								if (data.msg == "新增成功") {
									alert("人脸录入成功");
									location.href="faceLoginSuccess"
								}else{
									alert("人脸录入失败");
									location.reload();
								}

								/*  console.log("===="+data); 
								 alert("===="+data); 
								 pos = 0;
								 $("#img").attr("src", "");
								 $("#img").attr("src", data.url); */
							}
						});
					}
				};

			} else {

				saveCB = function(data) {
					image.push(data);

					pos += 4 * w;

					if (pos >= 4 * w * h) {
						/* $.post("servlet/CatD", {type: "pixel", image: image.join('|')}, function(msg){
						    console.log("+++++"+eval(msg));
						    pos = 0;
						    $("#img").attr("src", msg+"");
						}); */

						$.ajax({
							type : "post",
							url : "entryface",
							dataType : "json",
							data : {
								type : "pixel",
								image : image.join('|'),
								uid : $("#uid").val()
							},
							success : function(data) {
								/* alert(data.msg);
								console.log(data.msg) */
								if (data.msg == "新增成功") {
									alert("人脸录入成功");
									location.href="faceLoginSuccess"
								}else{
									alert("人脸录入失败");
									location.reload();
								}
								/* console.log("+++++"+eval(msg));
								pos = 0;
								$("#img").attr("src", msg+""); */
							}
						});
					}
				};
			}

			$("#webcam").webcam({
				width : w,
				height : h,
				mode : "callback",
				swffile : "../admin/js/jscam_canvas_only.swf",

				onSave : saveCB,

				onCapture : function() {
					webcam.save();
				},

			/*  debug: function (type, string) {
			     console.log(type + ": " + string);
			 } */
			});
		});

		//拍照
		function savePhoto() {
			webcam.capture();
		}
	</script>
	<!--/请在上方写此页面业务相关的脚本-->


</body>

</html>